<template>
	<view>
		<!-- 提示评价 -->
		<view class="comment">
			<u-button plain text="去评价" color="#62d8d6" throttleTime='1000' @tap="toComment"></u-button>
		</view>
		<!-- 底部评论 -->
		<view class="">
			<uni-section titleFontSize="40rpx" titleColor="#62d8d6" title="评论广场" ></uni-section>
		</view>
		<view class="bottom">
			<view class="container">
				<view class="childView" v-for="(item,i) in commentsList" :key="i">
					<view class="upContent">
						<view class="contentName">
							<image :src="item.activityImagePath.imgSrc"></image>
						</view>
					</view>
					<view class="bottomContent">
							<text class="u-line-1">用户名称:{{ item.purposeLocation }}</text>
						<view class="stars">
							<u-rate :count="count" v-model="item.activityImagePath.sort" activeColor="yellow"></u-rate>
						</view>
							<text class="u-line-1">
								用户评价:{{ item.description }}
							</text>
					</view>
				</view>
			</view>

		</view>
	</view>
	</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				count: 5,
				value: 2,
				userName: '',
				commentsList: [],
			};
		},
		onLoad() {
			this.getCommentsList()
		},
		computed: {
			...mapState('m_user', ['userInfo', 'token'])
		},
		methods: {
			toComment(){
				if(this.token!=="" && this.token!==null){
					uni.navigateTo({
						url:"/subpkg/myOrders/myOrders"
					})
				}else{
					uni.navigateTo({
						url:"/subpkg/loginPage/loginPage"
					})
				}
				
			},
			async getCommentsList() {
				const {
					data: res
				} = await uni.$u.http.post("/user/activity/list", {
					custom: {
						auth: true
					}
				})
				this.commentsList = res.data
			},
		}
	}
</script>

<style lang="scss">
	.comment{
		position: fixed ;
		bottom: 70%;
		left: 80%;
	}
	.head {
		display: flex;
		padding: 20px;

		.headImg {
			flex: 1;
		}

		.confim {
			flex: 2;

			.u-button {
				margin: 15px;
				width: 80px;
				height: 50px;
			}
		}
	}


	.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.childView {
			width: 42%;
			margin: 20rpx;

			.upContent {

				.contentName,
				image {
					border: 1px solid #ffffff;
					border-radius: 10px 10px 10px 10px;
					width: 100%;
					height: 100px;

					.CommentsWright {
						padding: 8px;
					}
				}
			}

			.bottomContent {
				line-height: 25px;
				padding: 15px;

				.stars {
					display: flex;
				}
			}

		}

	}
</style>